<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
        <li class="fa fa-remove"></li>
    </button>
    <h5 class="modal-title">新增用户</h5>
</div>

<div class="modal-body" style="height:600px;">
    <div class="row">
        <!-- /.col -->
        <div class="col-md-4">
            <div class="box box-primary" style="height: 577px;overflow-y:auto">
                <div class="box-body box-profile">
                    <div id="tree"></div>
                </div>
                <!-- /.box-body -->
            </div>
        </div>
        <div class="col-md-8">
            <!-- Profile Image -->
            <div class="box box-primary">
                <div class="box-header with-border" style="padding:0px;" id="searchDiv_ff">
                    <h5 id='funcName' style='font-size:14px' class='pull-left'>【配置数据权限】</h5>
                    <input name="roleId" id="rId" type="hidden" value="${roleId}"/>
                    <input name="functionId" type="hidden" id="fId" value="-1"/>
                    <div class="btn-group pull-right">
                        <button type="button" class="btn btn-primary btn-sm" data-btn-type="add_ff">
                            <i class="fa fa-plus">&nbsp;新增</i></button>
                        <button type="button" class="btn btn-default btn-sm" data-btn-type="update_ff">
                            <i class="fa fa-pencil">&nbsp;修改</i></button>
                        <button type="button" class="btn btn-default btn-sm" data-btn-type="delete_ff">
                            <i class="fa fa-remove">&nbsp;删除</i></button>
                    </div>
                </div>
                <div class="box-body" style="min-height: 520px">
                    <table id="ff_table" class="table table-bordered table-striped table-hover">
                    </table>
                </div>
                <div class="box-footer text-center">
                    <button class="btn btn-primary" data-btn-type="save"><i class="fa fa-save">&nbsp;保存</i></button>
                    <button class="btn btn-default" data-btn-type="cancel" data-dismiss="modal"><i class="fa fa-remove">
                        &nbsp;关闭</i></button>
                </div>
                <!-- /.box-body -->
            </div>
            <!-- /.box -->
        </div>
    </div>

</div>
<!-- dataTable -->
<script>
    var ffTable;
    var roleId = "${roleId}";
    $(function () {
        ffTable = new CommonTable("ff_table", "ff_list", "searchDiv_ff", null);
        initTree(0);
        //表格操作工具
        $("button[data-btn-type]").click(function () {
            var action_ff = $(this).attr('data-btn-type');
            var rowId_ff = ffTable.getSelectedRowId();
            var functionId = $("#fId").val();
            switch (action_ff) {
                case "add_ff":
                    modals.openWin({
                        winId: "ffWin",
                        width: 600,
                        title: "新增数据权限",
                        url: basePath + '/rolefunc/ff/edit/' + roleId + '/' + functionId + '/0'
                    });
                    break;
                case "update_ff":
                    if (!rowId_ff) {
                        modals.info('请选择要编辑的行');
                        return false;
                    }
                    modals.openWin({
                        winId: "ffWin",
                        width: 600,
                        title: "编辑【" + $('#funcName').val() + "】数据权限",
                        url: basePath + '/rolefunc/ff/edit/' + roleId + '/' + functionId + '/' + rowId_ff
                    });
                    break;
                case "delete_ff":
                    if (!rowId_ff) {
                        modals.info("请选择要删除的行");
                        return false;
                    }
                    ajaxPost(basePath + "/rolefunc/ff/delete/" + rowId_ff, null, function (data) {
                        if (data.success) {
                            ffTable.reloadData();
                        }
                    });
                    break;
                case "save":
                    var nodes = $("#tree").data("treeview").getChecked();
                    var rflist = [];
                    for (var i = 0; i < nodes.length; i++) {
                        var curNode = nodes[i];
                        var obj = {};
                        obj.functionId = curNode.id;
                        obj.roleId = roleId;
                        rflist.push(obj);
                    }
                    //批量保存选中节点
                    ajaxPost(basePath + "/rolefunc/save_batch", {
                        roleId: roleId,
                        rflist: JSON.stringify(rflist)
                    }, function (data, status) {
                        modals.hideWin("roleFuncWin");
                    });
                    break;
                default:
                    break;
            }
        });
    });

    function initTree(selectNodeId) {
        var treeData = null;
        ajaxPost(basePath + "/function/treeData", null, function (data) {
            treeData = data;
            //console.log(JSON.stringify(treeData));
        });
        $("#tree").treeview({
            data: treeData,
            showBorder: true,
            levels: 3,
            showCheckbox: true,
            showIcon: false,
            onNodeSelected: function (event, data) {
                if (data.state.checked) {
                    setCheckedNodeMsg(data);
                }

            },
            onNodeChecked: function (event, data) {
                //选中所有子节点
                checkChildren(data,true);
                setCheckedNodeMsg(data);
                //点击同时选中
                $("#tree").data('treeview').selectNode(data.nodeId, {silent: true});
                //父节点选中
                checkParent(data,true);
            },
            onNodeUnchecked: function (event, data) {
                disableButtons();
                checkChildren(data,false);
                checkParent(data,false);

            }
        });
        if (treeData.length == 0)
            return;
        //默认选中第一个节点
        selectNodeId = selectNodeId || 0;
        $("#tree").data('treeview').selectNode(selectNodeId);
        $("#tree").data('treeview').expandNode(selectNodeId);
        $("#tree").data('treeview').revealNode(selectNodeId);
        //默认选中对应的角色
        checkNodes();

    }

    function checkChildren(node,checked){
        if(node.nodes&&node.nodes.length>0){
            for(var i=0;i<node.nodes.length;i++) {
                if(checked)
                    $('#tree').treeview('checkNode', [node.nodes[i].nodeId, {silent: true}]);
                else
                    $('#tree').treeview('uncheckNode', [node.nodes[i].nodeId, {silent: true}]);
                 checkChildren(node.nodes[i],checked);
            }
        }
    }

    function checkParent(node,checked){
        var pnode = $('#tree').data('treeview').getParent(node.nodeId);
        if (pnode) {
            if(checked) {
                $('#tree').treeview('checkNode', [pnode.nodeId, {silent: true}]);
                checkParent(pnode,checked);
            }
            else{
                //查看兄弟节点状态
                var brothers=  $('#tree').data('treeview').getSiblings(node.nodeId);
                var flag=true;
                if(brothers&&brothers.length>0){
                    for(var i=0;i<brothers.length;i++){
                        if(brothers[i].state.checked){
                            flag=false;
                        }
                    }
                }
                if(flag){
                    $('#tree').treeview('uncheckNode', [pnode.nodeId, {silent: true}]);
                    checkParent(pnode,checked);
                }
            }

        }
    }

    function checkNodes() {
        ajaxPost(basePath + "/function/list/" + roleId, null, function (data) {
            if (data && data.length > 0) {
                for (var i = 0; i < data.length; i++) {
                    var nodes=$("#tree").data('treeview').findNodes(data[i], 'g', 'id');
                    $("#tree").data('treeview').checkNode(nodes[0], {silent: true});
                }
            }
        })
    }

    function disableButtons() {
        $("button[data-btn-type='add_ff']").attr("disabled", true);
        $("button[data-btn-type='update_ff']").attr("disabled", true);
        $("button[data-btn-type='delete_ff']").attr("disabled", true);
    }

    function enableButtons() {
        $("button[data-btn-type='add_ff']").attr("disabled", false);
        $("button[data-btn-type='update_ff']").attr("disabled", false);
        $("button[data-btn-type='delete_ff']").attr("disabled", false);
    }

    function setCheckedNodeMsg(data) {
        enableButtons();
        $("#fId").val(data.id);
        ffTable.reloadData();
        $("#funcName").remove();
        $("#searchDiv_ff").prepend("<h5 id='funcName' style='font-size:14px' class='pull-left'>【" + data.text + "】</h5>");
    }

</script>